<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习vue</title>
    <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
    <style>
        *{
            padding: 12px;
        }
    </style>
</head>
<body>
    <div id="root">
        <h1>计算时间：{{formatTime}}</h1>
        <h1>方法时间：{{getFormatTime()}}</h1>
        <!-- 过滤器实现 -->
        <!-- 传参的第一个参数默认是time -->
        <h1>时间：{{time | filterTime()}}</h1>
        <!-- 也可以简写成不要括号 -->
        <h1>时间：{{time | filterTime}}</h1>
        <!-- 传参后第一个参数默认是time，后面的参数做为第2+个参数传入 -->
        <h1>时间：{{time | filterTime('YYYY-MM-DD')}}</h1>
        <!-- 可以多个管道连续过滤 -->
        <h1>时间：{{time | filterTime('YYYY-MM-DD') | mySlice}}</h1>
        <!-- 除了插值语法里面之外，属性单向绑定也可以用 -->
        <h1 :x="name | mySlice">除了插值语法里面之外，属性单向绑定也可以用:{{time | filterTime('YYYY-MM-DD') | mySlice}}</h1>
        <!-- 双向绑定过滤器会报错 -->
        <!-- <input type="text" v-model="name | mySlice"> -->
    </div>
    
    <div id="root2">
        <h1>计算时间：{{time | mySlice}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false;
        //全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        });
        new Vue({
            el:'#root',
            data:{
                name:'zzzffffffffz1zzzzzzzz',
                time:Date.now()
            },
            computed:{
                formatTime(){
                    return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")
                },
            },
            methods:{
                getFormatTime(){
                    return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")
                }
            },
            watch:{
            },
            //局部过滤器
            filters:{
                //str=''是es6的一种默认值写法，如果str是undefined的话，则赋值成默认值
                filterTime(value, str='YYYY-MM-DD HH:mm:ss'){
                    return dayjs(value).format(str)
                },
                //局部过滤器
                // mySlice(value){
                //     return value.slice(0,4)
                // }
            }
        })
        new Vue({
            el:'#root2',
            data:{
                name:'zzz1',
                time:'6666666666666'
            },
            computed:{
            },
            methods:{
            },
            watch:{
            },
        })
    </script>    
</body>
</html>